<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WeChat - Home</title>
    <!--内容自适应,禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/container.css">
    <link rel="stylesheet" href="../css/phone-title.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/wrap-chat.css">
    <link rel="stylesheet" href="../css/wrap-add-friend.css">
    <link rel="stylesheet" href="../css/wrap-discovery.css">
    <link rel="stylesheet" href="../css/wrap-me.css">
    <link rel="stylesheet" href="../css/menu.css">
    <link rel="stylesheet" href="../css/header-menu.css">
    <link rel="stylesheet" href="../css/moments.css">
    <script src="../static/jquery/jquery.js"></script>
    <script src="../static/js/menu-bottom.js"></script>
    <script src="../static/js/menu-header-popup.js"></script>
    <script src="../static/js/moments.js"></script>

    <script>
        $(function () {
            console.log(1)
        })
    </script>


</head>
<body>
    <div id="container">
        <!--信号、时间、电池-->
        <div id="phone-title">
            <!--信号-->
            <div id="phone-title-left">
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="no-signal"></div>
                <div>中国移动&nbsp;4G</div>
            </div>
            <!--时间-->
            <div id="phone-title-center">12:00</div>
            <!--电池电量-->
            <div id="phone-title-right">
                <div>88%</div>
                <div><!--壳-->
                    <div></div><!--电量-->
                </div>
                <div></div><!--正极-->
            </div>
        </div>
        <!--信号、时间、电池 end-->

        <!--返回、信息条数、加号-->
        <div id="header" class="header-font">
            <!--返回-->
            <div id="header-control">
                <div></div>
                <div>返回</div>
            </div>
            <!--信息条数-->
            <div id="msg">微信(10)</div>
            <!--加号-->
            <div id="function">
                <div id="add"></div>
                <!--弹出菜单-->
                <div id="popup-menu">
                    <!--向上箭头-->
                    <div id="small-triangle-up"></div>
                    <!--菜单内容-->
                    <div class="popup-menu-content">
                        <div class="popup-menu-content-icon">
                            <img src="../static/img/icon/control/发起群聊.svg">
                        </div>
                        <div>发起群聊</div>
                    </div>

                    <div class="popup-menu-content">
                        <div class="popup-menu-content-icon">
                            <img src="../static/img/icon/control/添加朋友.svg">
                        </div>
                        <div>添加朋友</div>
                    </div>

                    <div class="popup-menu-content">
                        <div class="popup-menu-content-icon">
                            <img src="../static/img/icon/control/扫一扫.svg">
                        </div>
                        <div>扫一扫</div>
                    </div>

                    <div class="popup-menu-content">
                        <div class="popup-menu-content-icon">
                            <img src="../static/img/icon/control/收付款.svg">
                        </div>
                        <div>收付款</div>
                    </div>

                </div>
            </div>
        </div>
        <!--返回、信息条数、加号 end-->

        <!--微信、通讯录、发现、我四个区-->
        <div id="wrap-chat">
            <div id="search">
                <input/>
            </div>
            <!--对话列表-->
            <div id="lists">
                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/奥巴马-01.jpg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">奥巴马</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">7:10</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/女孩-01.jpeg"/>
                        <div class="new-msg">3</div>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">金莲</div>
                        <div class="text">大郎，该吃药了。。</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">昨天</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/川普-01.jpg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">川普</div>
                        <div class="text">前天</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">12:00</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/王者荣耀.jpg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">王者荣耀</div>
                        <div class="text">充值到账100w元</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">2021-10-11</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/情侣-01.jpg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">xxx</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">2021-10-09</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/马化腾.png"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">马儿子</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">2021-09-01</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/女孩-02.jpeg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">大郎</div>
                        <div class="text-radio">[语音]</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">2021-01-23</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/bsj.png"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">xxx</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">2021-01-01</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/男孩-01.jpg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">xxx</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">2021-01-01</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/neusoft.png"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">李白</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">公元前220</div>
                </div>

                <!--每个消息-->
                <div class="content">
                    <!--头像-->
                    <div class="content-left">
                        <img src="../static/img/photo/img-16303210662638d1e2089d1321ec9c0f743e683821b9c.jpg"/>
                    </div>
                    <!--用户名和聊天信息-->
                    <div class="content-center">
                        <div class="username">白my</div>
                        <div class="text">用户名和聊天信息新乡新信息</div>
                    </div>
                    <!--时间-->
                    <div class="content-right">公元前220</div>
                </div>
            </div>
        </div>

        <!--通讯录-->
        <div id="wrap-add-friend">
            <div class="groups">
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/me/新朋友.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>新的朋友</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/me/新朋友.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>仅聊天朋友</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/me/群聊.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>群聊</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/me/标签.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>标签</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/me/公众号.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>公众号</div>
                    </div>
                </div>
            </div>

            <!--A-->
            <div class="friends-sign">
                <div>A</div>
            </div>

            <div class="groups">
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091719.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>aaa</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091726.png">
                    </div>
                    <div class="groups-item-center">
                        <div>阿兰</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091731.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>安安</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091744.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>安生</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091752.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>A1-白菜菌</div>
                    </div>
                </div>
            </div>

            <!--H-->
            <div class="friends-sign">
                <div>D</div>
            </div>

            <div class="groups">
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091757.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>韩思</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091801.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>何佳</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091810.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>李佳航</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091815.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>何凯</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091838.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>韩周彤</div>
                    </div>
                </div>
            </div>

            <!--L-->
            <div class="friends-sign">
                <div>L</div>
            </div>

            <div class="groups">
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091821.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>凌宣</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091855.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>李星云</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091909.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>刘德华</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091927.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>林俊杰</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091945.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>李世民</div>
                    </div>
                </div>
            </div>

            <!--W-->
            <div class="friends-sign">
                <div>W</div>
            </div>

            <div class="groups">
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091919.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>王安</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091937.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>王瑞</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091915.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>吴京</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091902.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>魏新雨</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091844.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>汪扬</div>
                    </div>
                </div>
            </div>

            <!--S-->
            <div class="friends-sign">
                <div>S</div>
            </div>

            <div class="groups">
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091815.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>宋子琛</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091810.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>孙燕姿</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091744.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>诉诉</div>
                    </div>
                </div>
                <div class="groups-item">
                    <div class="friends-item-left">
                        <img src="../static/img/friend/QQ图片20211030091838.jpg">
                    </div>
                    <div class="groups-item-center">
                        <div>时倾花开</div>
                    </div>
                </div>
            </div>

        </div>

        <div id="wrap-discovery">
            <!--每组容器-->
            <div class="groups">
                <div class="groups-item" id="moment">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/朋友圈.svg">
                    </div>
                    <div class="groups-item-center">朋友圈</div>
                    <div class="groups-item-right"></div>
                </div>
            </div>
            <div class="groups">
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/扫一扫.svg">
                    </div>
                    <div class="groups-item-center">扫一扫</div>
                    <div class="groups-item-right"></div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/摇一摇.svg">
                    </div>
                    <div class="groups-item-center">摇一摇</div>
                    <div class="groups-item-right"></div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/搜一搜.svg">
                    </div>
                    <div class="groups-item-center">搜一搜</div>
                    <div class="groups-item-right"></div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/看一看.svg">
                    </div>
                    <div class="groups-item-center">看一看</div>
                    <div class="groups-item-right"></div>
                </div>
            </div>
            <div class="groups">
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/附近的人.svg">
                    </div>
                    <div class="groups-item-center">附近的人</div>
                    <div class="groups-item-right"></div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/漂流瓶.svg">
                    </div>
                    <div class="groups-item-center">漂流瓶</div>
                    <div class="groups-item-right"></div>
                </div>
            </div>
            <div class="groups">
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/购物.svg">
                    </div>
                    <div class="groups-item-center">购物</div>
                    <div class="groups-item-right"></div>
                </div>
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/游戏.svg">
                    </div>
                    <div class="groups-item-center">游戏</div>
                    <div class="groups-item-right"></div>
                </div>
            </div>
            <div class="groups">
                <div class="groups-item">
                    <div class="groups-item-left">
                        <img src="../static/img/icon/dicovery/小程序.svg">
                    </div>
                    <div class="groups-item-center">小程序</div>
                    <div class="groups-item-right"></div>
                </div>
            </div>
        </div>

        <div id="wrap-me">
            <!--顶部个人信息容器-->
            <div class="wrap-me-top">
                <!--左侧头像-->
                <div class="wrap-me-top-left">
                    <img src="../static/img/images/头像1.jpg">
                </div>
                <!--中间区域-->
                <div class="wrap-me-top-center">
                    <div>陌殇殇</div>
                    <div>微信号：10086</div>
                </div>
                <!--最右边二维码-->
                <div class="wrap-me-top-right">
                    <img src="../static/img/icon/me/二维码.jpg">
                </div>
            </div>
            <!--下方列表-->
            <div class="wrap-me-buttom">
                <!--每组容器-->
                <div class="groups">
                    <!--每一项-->
                    <div class="groups-item">
                        <div class="groups-item-left">
                            <img src="../static/img/icon/me/支付.jpg">
                        </div>
                        <div class="groups-item-center">
                            <div>支付</div>
                        </div>
                        <div class="groups-item-right">
                        </div>
                    </div>
                </div>
                <!--每组容器-->
                <div class="groups">
                    <!--每一项-->
                    <div class="groups-item">
                        <div class="groups-item-left">
                            <img src="../static/img/icon/me/收藏.jpg">
                        </div>
                        <div class="groups-item-center">
                            <div>收藏</div>
                        </div>
                        <div class="groups-item-right">
                        </div>
                    </div>
                    <!--每一项-->
                    <div class="groups-item">
                        <div class="groups-item-left">
                            <img src="../static/img/icon/me/朋友圈.jpg">
                        </div>
                        <div class="groups-item-center">
                            <div>朋友圈</div>
                        </div>
                        <div class="groups-item-right">
                        </div>
                    </div>
                    <!--每一项-->
                    <div class="groups-item">
                        <div class="groups-item-left">
                            <img src="../static/img/icon/me/卡包.jpg">
                        </div>
                        <div class="groups-item-center">
                            <div>卡包</div>
                        </div>
                        <div class="groups-item-right">
                        </div>
                    </div>
                    <!--每一项-->
                    <div class="groups-item">
                        <div class="groups-item-left">
                            <img src="../static/img/icon/me/表情.jpg">
                        </div>
                        <div class="groups-item-center">
                            <div>表情</div>
                        </div>
                        <div class="groups-item-right">
                        </div>
                    </div>
                </div>
                <!--每组容器-->
                <div class="groups">
                    <!--每一项-->
                    <div class="groups-item">
                        <div class="groups-item-left">
                            <img src="../static/img/icon/me/设置.jpg">
                        </div>
                        <div class="groups-item-center">
                            <div>设置</div>
                        </div>
                        <div class="groups-item-right">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--微信、通讯录、发现、我四个区 end-->

        <!--朋友圈-->
        <div id="moments">
            <!--用户背景-->
            <div id="huge-screen">
                <!--用户信息-->
                <div id="user">
                    <div id="user-name">马化腾</div>
                    <div id="user-photo">
                        <img src="../static/img/photo/马化腾.png"/>
                    </div>
                </div>
            </div>

            <!--新消息通知区-->
            <div id="notification"></div>

            <!--信息列表-->
            <div id="moment-list">
                <!--每个信息-->
                <div class="moment-content">
                    <!--左侧好友头像-->
                    <div class="moment-content-left">
                        <img src="../static/img/photo/王者荣耀.jpg"/>
                    </div>
                    <!--右侧消息-->
                    <div class="moment-content-right">
                        <!--用户名和信息-->
                        <div class="moment-content-username">王者荣耀官方</div>
                        <div class="moment-content-text">十周年快乐！</div>
                        <!--信息内容的图片-->
                        <div class="moment-content-imgs">
                            <div class="user-imgs" data-img="../static/img/images/porsche-normal.jpg"></div>
                        </div>

                        <!--回复区-->
                        <div class="moment-function">
                            <!--时间-->
                            <div class="moment-function-time">11分钟前</div>
                            <!--右侧弹出-->
                            <div class="moment-function-right">
                                <div class="moment-function-control">
                                    <div>
                                        <div></div>
                                        <div>赞</div>
                                    </div>
                                    <div>
                                        <div></div>
                                        <div>评论</div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!--回复区箭头-->
                        <div id="triangle-up"></div>

                        <!--点赞和评论容器-->
                        <div class="comments-board">
                            <!--点赞的人-->
                            <div class="upvotes">
                                <div class="upvotes-img"></div><!--心形-->
                                <div class="upvotes-names">
                                    <div class="name">马化腾,</div>
                                    <div class="name">王思聪</div>
                                </div>
                            </div>

                            <!--评论区-->
                            <div class="comments">
                                <div class="comment">
                                    <div class="comment-name">马化腾:</div>
                                    <div class="comment-content">腾讯以后就靠你了</div>
                                </div>
                                <div class="comment">
                                    <div class="comment-name">同学小王:</div>
                                    <div class="comment-content">下午放假好开心</div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="moment-content">
                    <div class="moment-content-left">
                        <img src="../static/img/photo/郭德纲.jpg"  />
                    </div>
                    <div class="moment-content-right">
                        <div class="moment-content-username">郭德纲</div>
                        <div class="moment-content-text">这都是哪 ? 光拍照了 忘了地名 .  </div>
                        <div class="moment-content-imgs">
                            <div class="user-imgs" data-img="../static/img/images/建筑-01.jpg"></div>
                            <div class="user-imgs" data-img="../static/img/images/建筑-02.jpg"></div>
                            <div class="user-imgs" data-img="../static/img/images/建筑-03.jpg"></div>
                        </div>
                        <div class="moment-function">
                            <div class="moment-function-time">42分钟前</div>
                            <div class="moment-function-right">
                                <div class="moment-function-control">
                                    <div >
                                        <div></div>
                                        <div>赞</div>
                                    </div>
                                    <div>
                                        <div></div>
                                        <div>评论</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--箭头，赞，评论区-->
                        <div class=""></div>
                    </div>
                </div>
                <!--######################################################-->
                <div class="moment-content">
                    <div class="moment-content-left">
                        <img src="../static/img/photo/王者荣耀.jpg"/>
                    </div>
                    <div class="moment-content-right">
                        <div class="moment-content-username">BootStrap</div>
                        <div class="moment-content-text">这个做我们项目的背景图如何? 大家说说</div>
                        <div class="moment-content-imgs">
                            <div class="user-imgs" data-img="../static/img/images/旅游-01.png" ></div>
                        </div>
                        <div class="moment-function">
                            <div class="moment-function-time">42分钟前</div>
                            <div class="moment-function-right">
                                <div class="moment-function-control">
                                    <div >
                                        <div></div>
                                        <div>赞</div>
                                    </div>
                                    <div>
                                        <div></div>
                                        <div>评论</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--箭头，赞，评论区-->
                        <div class=""></div>
                    </div>
                </div>
            </div>
        </div>

        <!--底部菜单按钮-->
        <div id="menu">
            <!--聊天按钮-->
            <div class="menu-div"
                 data-icon-normal="../static/img/icon/menu/聊天.svg"
                 data-icon-press="../static/img/icon/menu/聊天-press.svg"
                 data-target="wrap-chat">
                <!--图片及增大20%-->
                <img class="icon" src="../static/img/icon/menu/聊天-press.svg" style="transform: scale(1.2)">
                <div class="font-menu">微信</div>
            </div>

            <!--通讯录按钮-->
            <div class="menu-div"
                data-icon-normal="../static/img/icon/menu/通讯录.svg"
                data-icon-press="../static/img/icon/menu/通讯录-press.svg"
                data-target="wrap-add-friend">
                <img class="icon" src="../static/img/icon/menu/通讯录.svg">
                <div class="font-menu">通讯录</div>
             </div>

            <!--发现按钮-->
            <div class="menu-div"
                 data-icon-normal="../static/img/icon/menu/发现.svg"
                 data-icon-press="../static/img/icon/menu/发现-press.svg"
                 data-target="wrap-discovery">
                <img class="icon" src="../static/img/icon/menu/发现.svg" style="transform: scale(0.9)">
                <div class="font-menu">发现</div>
            </div>

            <!--我按钮-->
            <div class="menu-div"
                 data-icon-normal="../static/img/icon/menu/me.svg"
                 data-icon-press="../static/img/icon/menu/me-press.svg"
                 data-target="wrap-me">
                <img class="icon" src="../static/img/icon/menu/me.svg">
                <div class="font-menu">我</div>
            </div>

        </div>
    </div>

</body>
</html>